<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单和按钮</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin:50px;">
	<!-- 
	1.表单样式
		1)	.form-control 				//对input添加。给一栏表单设置样式，基础样式,
		2)	.form-group					//组成一组元素，并设置margin-bottom = 15px

		支持的控件类型:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color

	2.内联表单
		1)	.form-inline 				//对form添加。设置表单为内联,居于一行
	
	3.群组合并
		1)	.input-group 				//对父级div添加
		2) 	.input-group-addon 			//对要合并的div添加	,而不是input

	4.水平排列(用到栅格系统知识)
		1)	.form-horizontal 			//对form元素添加
		2)	.col-sm-2					//对label添加
		3)	.control-label 				//对label添加,让当前元素同步状态.文字居右
		4)	.col-sm-10 					//对input的容器添加

	5.复选框
		1)	.chekbox 					//对label的容器添加(所以一行一个选框)
		2)	.disabled					//禁用状态(去除文字上的手势)。对父级div添加,同时需要在对应的input项,添加css样式disabled
	
	6.内联复选框(即不再要外包div)
		1)	.checkbox-inline 			//对input或input的容器(一般是label)添加
		2)	disabled					//禁用状态。只需要给input添加css样式,没有手势问题

	7.单选框
		1)	.radio 						//单选框与复选框同理,只需要把check改为radio

	8.下拉列表
		1)	.form-control 				//对select添加。基本样式

	9.校验状态
		1)	.has-success 				//校验成功,对div添加
		2)	.has-waring					//校验警告,对div添加
		3)	.has-error					//校验失败,对div添加
		如果需要label也完成对应状态,只要对label添加control-label同步即可

	10.添加额外图标
		1) 	.glyphiocn 					//对新建的span添加
		2) 	.glyphiocn-ok 				//对span添加,成功图标
			.glyphicon-warning-sign 	//对span添加,警告图标
			.glyphicon-remove 			//对span添加,错误图标
		3)	.form-control-feedback 		//对span添加,使它绝对定位了，处于右上角（相当于给span加了居右的绝对定位）
		4)	.has-feedback 				//对form添加,使span在输入框内居右（相当于给form加了相对定位）

	11.尺寸大小
		1)	.input-lg 					//大。对input添加
		2)	.input-sm 					//小。对input添加’

		注: 也可以设置父级元素.form-group-lg、.form-group-sm来调整
		*1)	.form-group-lg 				//大。对input的父级添加
		*2)	.form-group-sm 				//小。对input的父级添加


	 -->

	
	<!-- <form class="form-inline"> -->
	<form>
		<div class="form-group">
			<label>电子邮箱</label>
			<input class="form-control" type="email" placeholder="请输入您的电子邮箱">
		</div>

		<div class="form-group">
			<label>密码</label>
			<input class="form-control" type="password" placeholder="请输入密码">
		</div>
		

		<div class="input-group">
			<div class="input-group-addon">￥</div>
			<input class="form-control" type="text">
			<div class="input-group-addon">.00 元</div>
		</div>
	</form>

	<hr>
	<div><mark>以下是水平排列</mark></div>
	<!-- 水平排列 -->

	<form class="form-horizontal">
		<div class="form-group">
			<label class="col-sm-2 control-label">电子邮箱</label>

			<div class="col-sm-10">
				<input class="form-control" type="email" placeholder="请输入您的电子邮箱">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">密码</label>

			<div class="col-sm-10">
				<input class="form-control" type="password" placeholder="请输入密码">
			</div>
		</div>
	</form>
	<hr>
	<!-- 复选框/单选框 -->

	<div class="checkbox disabled">
		<label><input type="checkbox" disabled>体育</label>
	</div>
	<div class="checkbox">
		<label><input type="checkbox">音乐</label>
	</div>
	<hr>

	<label class="checkbox-inline disabled"><input type="checkbox" disabled>体育</label>
	<label class="checkbox-inline"><input type="checkbox">音乐</label>
	<hr>
	<!-- 下拉列表 -->
	
	<select class="form-control">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>
	
	<!-- 邮箱校验 + 额外图标 + 尺寸大小-->
		<form>
			<div class="form-group has-success has-feedback">
				<label>电子邮箱</label>
				<input class="form-control input-lg" type="email" placeholder="请输入您的电子邮箱">
				<span class="glyphicon glyphicon-ok form-control-feedback"></span>
			</div>

			<div class="form-group has-warning has-feedback form-group-lg">
				<label class="control-label">电子邮箱</label>
				<input class="form-control" type="email" placeholder="请输入您的电子邮箱">
				<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
			</div>

			<div class="form-group has-error has-feedback">
				<label class="control-label">电子邮箱</label>
				<input class="form-control input-sm" type="email" placeholder="请输入您的电子邮箱">
				<span class="glyphicon glyphicon-remove form-control-feedback"></span>
			</div>
		</form>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>